<!-- 有限空间作业详情 -->
<template>
  <view class="page-view">
    <view class="top-bg">
      <u-sticky offset-top="50">
        <view class="return" @click="goToBack()">
          <u-icon name="arrow-left" color="#ffffff " bold="true" size="38"></u-icon>
        </view>
        有限空间作业{{`${'详情'}`}}
      </u-sticky>
      <view class="pageContent">
        <view class="fieldContent">
          <view class="rowStyle">
            <label class="label">申报日期</label><span class="value">{{formData.createTime}}</span>
          </view>
          <view class="rowStyle" label="" prop="sex" borderBottom @click="showSex = true; hideKeyboard()" ref="item1">
            <label class="label">作业编号</label><span class="value">{{formData.workNo}}</span>
          </view>
          <view class="rowStyle">
            <label class="label">作业内容</label><span class="value">{{formData.workDetail}}</span>
          </view>
          <view class="rowStyle">
            <label class="label">作业位置</label><span class="value">{{formData.workArea}}</span>
          </view>
          <view class="rowStyle">
            <label class="label">主要危险源</label><span class="value">{{formData.dangerSource}}</span>
          </view>
          <view class="rowStyle">
            <label class="label">作业风险等级</label><span class="value">{{formData.riskLevel == 1 ? '高风险':'一般风险'}}</span>
          </view>
          <view class="rowStyle">
            <label class="label">作业单位名称</label><span class="value">{{formData.workUnit}}</span>
          </view>
          <view class="rowStyle">
            <label class="label">作业单位地址</label><span class="value">{{formData.workUnitPosition}}</span>
          </view>
          <view class="rowStyle">
            <label class="label">作业联系人</label><span class="value">{{formData.workContact}}</span>
          </view>
          <view class="rowStyle">
            <label class="label">联系人电话</label><span class="value">{{formData.contactTel}}</span>
          </view>
          <view class="dangerTips"><van-icon name="info-o" style="margin-right: 6rpx" />是否经安全培训或岗前培训</view>
          <view class="rowStyle">
            <label class="label">现场作业负责人</label><span class="value">
              <view>{{ formData.siteManager||'' }}</view>
              <view v-if="formData.siteManagerStatus==1" class="radioIcon">
                <u-icon name="checkmark-circle-fill" color="#0be583" size="30"></u-icon>
                <span class="text2">是</span>
              </view>
              <view v-else class="radioIcon">
                <u-icon name="close-circle" size="30"></u-icon>
                <span class="text2">否</span>
              </view>
            </span>
          </view>
          <view class="rowStyle">
            <label class="label">监护人员</label><span class="value">
              <view>{{ formData.siteGuardian||'' }}</view>
              <view v-if="formData.siteGuardianStatus==1" class="radioIcon">
                <u-icon name="checkmark-circle-fill" color="#0be583" size="30"></u-icon>
                <span class="text2">是</span>
              </view>
              <view v-else class="radioIcon">
                <u-icon name="close-circle" size="30"></u-icon>
                <span class="text2">否</span>
              </view>
            </span>
          </view>
          <view class="rowStyle">
            <label class="label">作业人员</label><span class="value">
              <view>{{ formData.siteWorker||'' }}</view>
              <view v-if="formData.siteWorkerStatus==1" class="radioIcon">
                <u-icon name="checkmark-circle-fill" color="#0be583" size="30"></u-icon>
                <span class="text2">是</span>
              </view>
              <view v-else class="radioIcon">
                <u-icon name="close-circle" size="30"></u-icon>
                <span class="text2">否</span>
              </view>
            </span>
          </view>
          <view class="rowStyle">
            <label class="label">监管人员</label><span class="value">
              <view>{{ formData.siteSupervisor||'' }}</view>
              <view v-if="formData.siteSupervisorStatus==1" class="radioIcon">
                <u-icon name="checkmark-circle-fill" color="#0be583" size="30"></u-icon>
                <span class="text2">是</span>
              </view>
              <view v-else class="radioIcon">
                <u-icon name="close-circle" size="30"></u-icon>
                <span class="text2">否</span>
              </view>
            </span>
          </view>
          <view class="rowStyle">
            <label class="label">计划作业时间</label><span
              class="value">{{formData.planWorkDateBegin + '至' + formData.planWorkDateEnd}}</span>
          </view>
          <view class="h3Title"><span class="spot"></span>所附材料上传</view>
          <view>
            <view>
              <view class="rowStyle" style="padding: 16rpx 0; border: 0"><label class="label">安全交底材料</label><span
                  class="value downloadLinkText">
                  <view v-if="formData.safetyBriefingFile">
                    <view class="text" @click="previewWechat(JSON.parse(formData.safetyBriefingFile || '{}').path)">
                      {{JSON.parse(formData.safetyBriefingFile || '{}').name}}
                    </view>
                  </view>
                </span>
              </view>
              <view class="rowStyle" style="padding: 16rpx 0; border: 0"><label class="label">培训资料</label><span
                  class="value downloadLinkText">
                  <view v-if="formData.trainingFile">
                    <view class="text" @click="previewWechat(JSON.parse(formData.trainingFile || '{}').path)">
                      {{JSON.parse(formData.trainingFile || '{}').name}}
                    </view>
                  </view>
                </span>
              </view>
              <view class="rowStyle" style="padding: 16rpx 0; border: 0"><label class="label">器材机具清单</label><span
                  class="value downloadLinkText">
                  <view v-if="formData.equListFile">
                    <view class="text" @click="previewWechat(JSON.parse(formData.equListFile || '{}').path)">
                      {{JSON.parse(formData.equListFile || '{}').name}}
                    </view>
                  </view>
                </span></view>
              <view class="rowStyle" style="padding: 16rpx 0; border: 0"><label class="label">作业方案</label><span
                  class="value downloadLinkText">
                  <view v-if="formData.workFile">
                    <view class="text" @click="previewWechat(JSON.parse(formData.workFile || '{}').path)">
                      {{JSON.parse(formData.workFile || '{}').name}}
                    </view>
                  </view>
                </span>
              </view>
              <view class="rowStyle" style="padding: 16rpx 0; border: 0"><label class="label">应急救援预案</label><span
                  class="value downloadLinkText">
                  <view v-if="formData.rescueFile">
                    <view class="text" @click="previewWechat(JSON.parse(formData.rescueFile || '{}').path)">
                      {{JSON.parse(formData.rescueFile || '{}').name}}
                    </view>
                  </view>
                </span></view>
              <view class="rowStyle" style="padding: 16rpx 0; border-bottom: 1rpx solid #ebebeb"><label
                  class="label">其他资料</label><span class="value downloadLinkText">
                  <view v-if="formData.otherFile">
                    <view class="text" @click="previewWechat(JSON.parse(formData.otherFile || '{}').path)">
                      {{JSON.parse(formData.otherFile || '{}').name}}
                    </view>
                  </view>
                </span>
              </view>
            </view>
          </view>
          <view class="rowStyle">
            <label class="label">作业单位意见</label><span class="value">{{'同意'}}</span>
          </view>
          <view class="rowStyle">
            <label class="label">意见提交时间</label><span
              class="value">{{formData.createTime ? new Date(formData.createTime).format('yyyy-MM-dd') : '' }}</span>
          </view>
          <view v-if="formData.status != 1" class="rowStyle">
            <label class="label">管理单位意见</label><span class="value">{{formData.approvalComments||''}}</span>
          </view>
          <view v-if="formData.status != 1" class="rowStyle">
            <label class="label">意见提交时间</label><span
              class="value">{{formData.approvalPassDate ? new Date(formData.approvalPassDate).format('yyyy-MM-dd') : '' }}</span>
          </view>
          <view v-if="formData.status != 1" class="rowStyle">
            <label class="label">审批人</label><span class="value">{{formData.approver||''}}</span>
          </view>

        </view>
        <view class="fieldContent" v-if="formData.status == 1">
          <view class="rowStyle">
            <label class="label">管理单位意见</label>
            <view class="value">
              <!-- @input="(e)=>textareaInput(e)" -->
              <u--textarea placeholder="请输入审批意见" v-model="approvalComments" height="100"></u--textarea>
            </view>
          </view>
        </view>
        <view class="fieldContent">
          <!-- 作业前 -->
          <view v-if="formData.status == 3 || formData.status == 4">
            <h2 class="h2Title">作业留痕记录</h2>
            <view class="h3Title"><span class="spot"></span>作业前</view>
            <view class="dangerTips"><van-icon name="info-o" style="margin-right: 6rpx" />
              <span>上传所有作业人员正确佩戴安全帽、安全绳、呼吸器的照片</span>
            </view>
            <!-- @change="onChange" -->
            <u-checkbox-group v-model="checkboxValue" disabled placement="column">
              <u-checkbox shape="square" :name="1"
                :customStyle="{ marginRight: '24rpx',marginBottom: '30rpx',fontWeight: 'bold'}" size="28" iconSize="26"
                labelSize='28' label="个人防护装备到位"></u-checkbox>
              <u-checkbox shape="square" :name="2"
                :customStyle="{ marginRight: '24rpx',marginBottom: '30rpx',fontWeight: 'bold'}" size="28" iconSize="26"
                labelSize='28' label="应急救援设备到位"></u-checkbox>
              <u-checkbox shape="square" :name="3"
                :customStyle="{ marginRight: '24rpx',marginBottom: '30rpx',fontWeight: 'bold'}" size="28" iconSize="26"
                labelSize='28' label="确认所有安全措施已落实，现场环境安全，可以开始作业"></u-checkbox>
            </u-checkbox-group>
            <view class="rowStyle">
              <label class="label">上传图片</label>
              <view v-if="!!formData.checkPic" class="value imags">
                <image v-for="pic in formData.checkPic.split(',')" :key="pic" :src="pic" class="picClass"
                  @click="previewPic(pic, formData.checkPic.split(','))"></image>
              </view>
            </view>
            <view class="rowStyle">
              <label class="label">上传人员</label><span class="value">{{formData.picUper ||''}}</span>
            </view>
            <view class="rowStyle">
              <label class="label">上传时间</label><span class="value">{{formData.checkPicDate ||''}}</span>
            </view>
          </view>
          <!-- 作业后 -->
          <view v-if="formData.status == 4">
            <view class="h3Title"><span class="spot"></span>作业后</view>
            <view class="rowStyle">
              <label class="label">上传图片</label>
              <view v-if="!!formData.finishPic" class="value imags">
                <image v-for="pic in formData.finishPic.split(',')" :key="pic" :src="pic" class="picClass"
                  @click="previewPic(pic, formData.finishPic.split(','))"></image>
              </view>
            </view>
            <view class="rowStyle">
              <label class="label">上传时间</label><span class="value">{{formData.finishPicDate||''}}</span>
            </view>
          </view>
        </view>
        <view v-if="formData.status === 1" class="operationContent">
          <view class="examineBtn" @click="openExamineDialog">驳回</view>
          <view class="agreeBtn" @click="toAgree">同意</view>
        </view>

      </view>
    </view>
    <audit-examine-dialog v-if="examineDialog" :examineDialog="examineDialog"></audit-examine-dialog>
  </view>
</template>

<script>

import { getConfinedSpaceDetail, editSpaceWork } from '@/api/spaceWork'
import AuditExamineDialog from './auditExamineDialog.vue'
export default {
  components: { AuditExamineDialog },
  data() {
    return {
      formData: {},
      checkboxValue: [],
      examineDialog: false,
      auditExamineText: "",
      approvalComments: ''
    }
  },
  onLoad(query) {
    console.log(query, 'query')
    const { id } = query
    if (id) this.getConfinedSpaceDetail(id)

    const _this = this
    uni.$on('auditExamine', (approvalComments) => {
      // const { approvalComments } = query
      if (approvalComments) {
        console.log(approvalComments, '收到驳回原因！！')
        this.editSpaceWork(4, approvalComments)
      } else {
        uni.showToast({
          title: '请输入驳回理由',
          icon: 'error',
        });
      }
    })
    uni.$on('examinDialog', (examineDialog) => {
      console.log(examineDialog, '审核驳回关闭')
      // setTimeout(() => {
      _this.examineDialog = examineDialog
      // }, 1500)
    })
  },
  methods: {
    async editSpaceWork(status, approvalComments) {
      const res = await editSpaceWork({
        id: this.formData.id,
        status,
        approvalComments,
        isReject: status == 4 ? 1 : 0 // 驳回时传1
      })
      if (res.data.code == 200) {

        uni.showToast({
          title: res.message
        })
        this.getConfinedSpaceDetail(this.formData.id)
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none'
        })
      }
    },
    previewWechat(urlPdf) {
      uni.showLoading({
        title: '正在加载中..'
      })
      console.log(urlPdf, 'urlPdf')
      uni.downloadFile({
        url: urlPdf,
        success: function (res) {
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log('打开文档成功');
              uni.hideLoading()
            },
          });
        },
        complete: function (r) {
          uni.hideLoading()
        }
      });
    },
    getConfinedSpaceDetail(id) {
      getConfinedSpaceDetail({ id }).then(
        ({ data: { result } }) => {
          console.log(result, 'result')
          this.formData = result
          const checkBoxProp = ['personalProtectCheck', 'rescueCheck', 'commitCheck']
          checkBoxProp.forEach((prop, index) => {
            console.log(prop, 'prop')
            if (result[prop] == 1) {
              console.log(prop, '--------', result[prop])
              this.checkboxValue.push(index + 1)
            }
          })
        })
    },
    openExamineDialog() {
      this.examineDialog = true
    },

    // 审核通过
    toAgree() {
      console.log(this.formData, '点击数据！---同意审核')
      this.$modal.confirm('确认同意？', '提示').then(res => {
        this.approvalComments = "同意"
        this.editSpaceWork(2, '同意')
        console.log('确认审批通过！', this.approvalComments)
      })
    },
    // 预览图片
    previewPic(pic, picListStr) {
      uni.previewImage({
        current: pic,
        urls: picListStr
      })
    },

    goToBack() {
      this.$tab.navigateBack()
    },
  }
}
</script>

<style lang="scss" scoped>
.page-view {
  .pageContent {
    height: calc(100vh - 180rpx);
    overflow: auto;
    .operationContent {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      display: flex;
      margin: 36rpx;
      .examineBtn {
        height: 76rpx;
        line-height: 76rpx;
        width: 50%;
        background: #e6eeff;
        color: #2769f7;
      }
      .agreeBtn {
        height: 76rpx;
        line-height: 76rpx;
        width: 50%;
        background: #2769f7;
        color: #ffffff;
      }
    }
    .fieldContent {
      background: #fff;
      border-radius: 10rpx;
      color: #000;
      margin: 32rpx;
      text-align: left;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      padding: 0 28rpx 0 28rpx;
      .h3Title {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 30rpx;
        color: #4a4a4a;
        line-height: 42rpx;
        margin-top: 28rpx;
        margin-bottom: 22rpx;
        .spot {
          display: inline-block;
          width: 8rpx;
          height: 20rpx;
          background: #2769f7;
          border-radius: 6rpx 6rpx 6rpx 6rpx;
          opacity: 0.6;
          margin-right: 8rpx;
        }
      }
      .h2Title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: 32rpx;
        color: #4a4a4a;
        line-height: 44rpx;
        margin-top: 32rpx;
      }
      .dangerTips {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #ff0200;
        margin-top: 12rpx;
        display: flex;
        align-items: baseline;
      }
      .rowStyle {
        padding: 18rpx 0 22rpx 0;
        border-bottom: 1rpx solid #ebebeb;
        line-height: 40rpx;
        display: flex;
        position: relative;
        .label {
          flex: 1;
          color: #989898;
          vertical-align: top;
        }
        .value {
          width: calc(100% - 210rpx);
          color: #4a4a4a;
          display: inline-block;
          margin-left: 19rpx;
        }
        .downloadLinkText {
          color: #3c8aff;
        }
        .text2 {
          margin-left: 4rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #989898;
        }
        .radioIcon {
          display: flex;
          position: absolute;
          right: 100rpx;
          top: 18rpx;
        }
        .imags {
          // display: flex;
          // flex-wrap: wrap;
          display: inline-block;

          .picClass {
            width: 120rpx;
            height: 120rpx;
            border-radius: 10rpx;
            margin-right: 8rpx;
          }
        }
      }
      .rowStyle:last-child {
        border: 0;
      }
      ::v-deep .checkboxClass {
        margin-top: 20rpx;
      }
    }
  }
}
.top-bg {
  letter-spacing: 0 !important;
  width: 100%;
  height: 330rpx;
  background: #2769f7;
  border-radius: 0rpx 0rpx 140rpx 140rpx;
  padding-top: 104rpx;
  text-align: center;
  font-weight: 600;
  font-size: 40rpx;
  color: #ffffff;
  letter-spacing: 4rpx;
  position: relative;
  .return {
    position: absolute;
    left: 32rpx;
    margin-top: 8rpx;
  }

  .header-wrap {
  }
  .baseContent {
    padding: 32rpx;
  }
  .cardItem {
    background: #fff;
    border-radius: 6rpx;
    color: #000;
    margin: 32rpx;
    .workTitle {
      display: flex;
      justify-content: space-between;
      margin-bottom: 42rpx;
      .titleContent {
        flex: 1;
        white-space: wrap;
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: 28rpx;
        color: #4a4a4a;
        text-align: left;
      }
      .spot {
        display: inline-block;
        width: 8rpx;
        height: 20rpx;
        background: #2769f7;
        border-radius: 6rpx 6rpx 6rpx 6rpx;
        opacity: 0.6;
        margin-right: 8rpx;
      }
      .dangerLevelTag {
        display: inline-block;
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 20rpx;
        line-height: 40rpx;
        white-space: nowrap;
        padding: 6rpx 19rpx;
        border-radius: 6rpx;
      }
      .highDanger {
        color: #ff0200;
        background: #ffebef;
      }
      .generalDanger {
        color: #fc8382;
        background: #ffebef;
      }
    }
    .rowItem {
      display: flex;
      justify-content: space-between;
      font-weight: bold;
      line-height: 40rpx;
      margin-bottom: 16rpx;
      .label {
        color: #989898;
        font-weight: bold;
        font-size: 24rpx;
        line-height: 34rpx;
      }
      .value {
        width: calc(100% - 180rpx);
        text-align: left;
        font-size: 24rpx;
        color: #4a4a4a;
      }
    }
    .auditBtnContent {
      height: 76rpx;
      width: 100%;
      display: flex;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      .examineBtn {
        flex: 1;
        text-align: center;
        line-height: 76rpx;
        background: #e6eeff;
        color: #2769f7;
        border-radius: 0rpx 0rpx 0rpx 10rpx;
      }
      .submitBtn {
        flex: 1;
        text-align: center;
        line-height: 76rpx;
        background: #2769f7;
        color: #fff;
        border-radius: 0rpx 0rpx 10rpx 0rpx;
      }
    }
  }

  ::v-deep .van-tabs__scroll {
    background: transparent;
  }
  ::v-deep .van-tab {
    color: #fff;
  }
}
::v-deep .u-textarea {
  // width: 80%;
  // border: 1rpx solid #efefef;

  background-color: #f2f6f7 !important;
  border-radius: 10rpx;
  font-size: 24rpx !important;
  // margin-left: 28rpx;
  .u-textarea__field {
    font-size: 24rpx !important;
  }
}
</style>